<template>
   <el-upload class="upload-demo" :before-upload="beforeAvatarUpload" drag multiple>
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">
         支持拖拽 或<em>选择上传</em>
      </div>
      <template #tip>
         <div class="el-upload__tip">
            <!-- jpg/png 文件 -->
            图片格式：JPEG、JPG、PNG、BMP、GIF。 图片大小：小于3MB。 图片分辨率：大于15×15，小于4096×4096。
         </div>
      </template>
   </el-upload>
</template>

<script setup lang="ts">
import { UploadFilled } from '@element-plus/icons-vue'
import { reactive } from 'vue'
import { compressImage } from '@/utils/compress.js'
import { ElMessage } from 'element-plus'

// do not use same name with ref
const form = reactive({
   name: '',
   region: '',
   date1: '',
   date2: '',
   delivery: false,
   type: [],
   resource: '',
   desc: '',
})

const beforeAvatarUpload = (rawFile) => {
   console.log(rawFile)
   // 校验大小数量
   // var file = document.querySelector('input').files[0]
   // if (this.fileList.length >= 3) {
   //    Message.success({ content: `最多可上传3张` })
   //    return
   // }
   if (rawFile.size >= 1024 * 1024 * 2 || true) {
      ElMessage({
         message: (`照片大于2MB,平台将自动压缩`),
         type: 'warning'
      })

      // 压缩
      /**
      * @param { * } file input选择后返回的file对象
      */
      compressImage(rawFile).then((result) => {
         // result.compressFile 压缩后新的file对象
         // let formData = new FormData()
         // formData.set('file', result.compressFile)
         // console.log("*********")
         // console.log(formData)
         console.log()
         var reader = new FileReader();
         reader.readAsDataURL(result.compressFile);
         reader.onload = function () {
            console.log('图片', reader.result); //获取到base64格式图片
         }

      })

   }

}

</script>
